<template>
  <div class="home">
     <div class="login">
       <my-input placeholder="请输入用户名" v-model="user">用户名</my-input>
       <!-- &#x3000; 中文的空格 -->
       <my-input inputType="password" placeholder="请输入密码" v-model="pwd">密&#x3000;码</my-input>
       <button @click="login">登录</button>
     </div>
  </div>
</template>

<script>
// @ is an alias to /src
import MyInput from '../components/myInput';
import { reactive,toRefs } from 'vue';
import { useRouter } from 'vue-router';
export default {
  name: 'HomeView',
  components: {
    MyInput
  },
  setup(props) {
    const { push } = useRouter();
    const data = reactive({
      user: '', // 用户名
      pwd: '' // 密码
    })
    const login = () => { // 登录的函数
      let obj = {
        user: '黄四郎',
        pwd: '123456'
      }
      if (data.user && data.pwd){
        if (data.user == obj.user && data.pwd == obj.pwd){
          localStorage.setItem('user',data.user);
          push('/about');
        } else {
          alert('用户名或者密码错误');
        }
      } else {
        alert('用户名或者密码不能为空');
      }
    }
    return {
      ...toRefs(data),
      login
    }
  }
}
</script>
<style lang="scss" scoped>
.home{
  height: 100%;
  background: #bef6da;
  // position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  .login{
    background: #fff;
    width: 300px;
    padding: 20px 0;
    border-radius: 10px;
    text-align: center;
    // position: absolute;
    // top: 50%;
    // left: 50%;
    // transform: translate(-50%,-50%);
    button{
      width: 80px;
      border: none;
      background: #6ca7f0;
      color: #fff;
      margin-top: 15px;
      height: 26px;
      border-radius: 5px;
      cursor: pointer;
    }
  }
}
</style>

